<template>
  <div class="welcome">
    <div class="title">{{ welcomeTitle }}，杰哥，请开始一天的工作吧</div>
    <div class="weather">重庆 - 九龙坡 今日 雨 ， 24°C 天气较冷 注意保暖</div>
    <div class="status">
      <a-statistic
        v-for="l in state.info"
        :title="l.label"
        :value="l.value"
        :key="l.label"
        show-group-separator
        animation
      />
    </div>
    <div class="extra">
      <a href="#">系统帮助</a>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useHomeStatisticApi } from "@/api";
import type { StatisticItem } from "@/types/home/statistic";
import { computed, onMounted, reactive, ref } from "vue";

const welcomeTitle = computed(() => {
  const date = new Date();
  if (date.getHours() > 6 && date.getHours() < 12) {
    return "早上好";
  }
  if (date.getHours() > 12 && date.getHours() < 18) {
    return "下午好";
  }
  return "晚上好";
});

const state = reactive({
  info: [] as StatisticItem[],
});
const getInfo = async () => {
  let { data } = await useHomeStatisticApi();
  console.log(data, "333");
  state.info = data;
};

onMounted(() => {
  getInfo();
});
</script>
<style scoped lang="less">
.welcome {
  width: 100%;
  height: 251px;
  background-color: var(--color-bg-1);
  margin-bottom: 20px;
  border-radius: 5px;
  background-image: url("../../assets/images/home/welcome_bg.png");
  background-size: 230px;
  background-position: right center;
  background-repeat: no-repeat;
  padding: 20px;
  color: var(--color-text-2);
  .title {
    font-size: 22px;
    color: var(--color-text-1);
  }
  .weather {
    margin-top: 20px;
  }
  .status {
    margin-top: 20px;
    .arco-statistic {
      margin-right: 30px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .extra {
    margin-top: 20px;
    a {
      text-decoration: none;
      color: @primary-6;
    }
  }
}
</style>
